<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
	<link href="css/start/jquery-ui-1.10.2.custom.css" rel="stylesheet">
	<LINK href="css/css.css" rel="stylesheet" type="text/css">
	<LINK href="css/main.css" rel="stylesheet" type="text/css">

	<script src="js/jquery.min.js" type="text/javascript"></script>
	<SCRIPT src="js/validate.min.js" type="text/javascript"></SCRIPT>

	<script src="js/jquery-ui-1.10.2.custom.js"></script>

	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui-1.10.2.custom.js"></script>
	<script>
	$(function() {

		$( "#accordion" ).accordion();



		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#autocomplete" ).autocomplete({
			source: availableTags
		});



		$( "#button" ).button();
		$( "#radioset" ).buttonset();



		$( "#tabs" ).tabs();



		$( "#dialog" ).dialog({
			autoOpen: false,
			width: 400,
			buttons: [
				{
					text: "Ok",
					click: function() {
						$( this ).dialog( "close" );
					}
				},
				{
					text: "Cancel",
					click: function() {
						$( this ).dialog( "close" );
					}
				}
			]
		});

		// Link to open the dialog
		$( "#dialog-link" ).click(function( event ) {
			$( "#dialog" ).dialog( "open" );
			event.preventDefault();
		});



		$( "#datepicker" ).datepicker({
			inline: true
		});



		$( "#slider" ).slider({
			range: true,
			values: [ 17, 67 ]
		});



		$( "#progressbar" ).progressbar({
			value: 20
		});


		// Hover states on the static widgets
		$( "#dialog-link, #icons li" ).hover(
			function() {
				$( this ).addClass( "ui-state-hover" );
			},
			function() {
				$( this ).removeClass( "ui-state-hover" );
			}
		);
	});
	</script>
	<style>
	body{
		font: 62.5% "Trebuchet MS", sans-serif;
		margin: 50px;
	}
	.demoHeaders {
		margin-top: 2em;
	}
	#dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
	}
	#dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
	#icons {
		margin: 0;
		padding: 0;
	}
	#icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: left;
		list-style: none;
	}
	#icons span.ui-icon {
		float: left;
		margin: 0 4px;
	}
	.fakewindowcontain .ui-widget-overlay {
		position: absolute;
	}
	</style>
</head>

<body>

<DIV class="success_box">All of the fields were successfully validated!</DIV>
<DIV class="error_box"></DIV>
<FORM name="example_form" action="#" method="POST">
<div id="accordion">
	<h3>School Details</h3>
	<div>
	<table id="1">
	<tr><td>School Name</td><td><input name="School_Name" id="autocomplete" title="type "a""></td></tr>
	<tr><td>Address</td><td><input name="Address" id="autocomplete" title="type "a""></td></tr>
	<tr><td>City</td><td><input name="City" id="autocomplete" title="type "a""></td></tr>
	<tr><td>State</td><td><input name="State" id="autocomplete" title="type "a""></td></tr>
	<tr><td>Pincode</td><td><input name="pincode" id="autocomplete" title="type "a""></td></tr>
	<tr><td>Country</td><td><input name="Country" id="autocomplete" title="type "a""></td></tr>
	</table>
	</div>
	<h3>Contact Information</h3>
	<div>
	<table id="2">
	<tr><td>Landline No.</td><td><input name="LandLine" id="autocomplete" title="type "a""></td></tr>
	<tr><td>Principal Name</td><td><input name="Principal_Name" id="autocomplete" title="type "a""></td></tr>
	<tr><td>Point of Contact</td><td><input name="Point_of_Contact" id="autocomplete" title="type "a""></td></tr>
	<tr><td>Phone no.</td><td><input name="Phone_No" id="autocomplete" title="type "a""></td></tr>
	<tr><td>Email ID</td><td><input name="Email_Id" id="autocomplete" title="type "a""></td></tr>
	</table>
	</div>
	<h3>Other</h3>
	<div>
	<table id="3">
	<tr><td>How did you hear about us?</td><td>


	<select>
	<option>Friend</option>
	<option>Other Schools</option>
	<option>Social Media</option>
	<option>Newspaper</option>
	<option></option>
	</select>
	</td></tr>
	</table>
	</div>
</div>
</br>
<button id="button" name="submit" type="submit">Submit Request</button>
</form>
<SCRIPT type="text/javascript">

new FormValidator('example_form', [{
    name: 'School_Name',
    display: 'School Name',
    rules: 'required|min_length[5]'
}, {
    name: 'Address',
    display: 'Address',
    rules: 'required|min_length[5]'
},{
    name: 'City',
    display: 'City',
    rules: 'required'
},{
    name: 'State',
    display: 'State',
    rules: 'required'
},{
    name: 'pincode',
    display: 'Pin Code',
    rules: 'required|numeric'
},{
    name: 'Country',
    display: 'Country',
    rules: 'required'
},{
    name: 'Landline_No',
    display: 'Landline No',
    rules: 'required|numeric|min_length[10]'
},{
    name: 'Principal_Name',
    display: 'Country',
    rules: 'required'
},{
    name: 'Point_of_Contact',
    display: 'Point of Contact',
    rules: 'required|alpha'
},{
    name: 'Phone_No',
    display: 'Phone_No',
    rules: 'required|numeric|min_length[10]'
},{
    name: 'Email_Id',
    display: 'Email_Id',
    rules: 'required|valid_email'
}], function(errors, evt) {
    var SELECTOR_ERRORS = $('.error_box'),
        SELECTOR_SUCCESS = $('.success_box');

    if (errors.length > 0) {
        SELECTOR_ERRORS.empty();

        for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
            SELECTOR_ERRORS.append(errors[i].message + '<br />');
        }

        SELECTOR_SUCCESS.css({ display: 'none' });
        SELECTOR_ERRORS.fadeIn(200);
    } else {
        SELECTOR_ERRORS.css({ display: 'none' });
        SELECTOR_SUCCESS.fadeIn(200);
    }

    if (evt && evt.preventDefault) {
        evt.preventDefault();
    } else if (event) {
        event.returnValue = false;
    }
});

</SCRIPT>
</body>
<html>